<template>
  <div class="main">
    <NavBar
  :title="actions[0].name"
  left-text="返回"
 
  left-arrow
  @click-left="onClickLeft"
  
/>
   <!-- <Button type="primary" @click="change">{{$t("title")}}</Button> -->
   <br>
   <Button type="primary" @click="exportexcle">Export Excel</Button>
   <!-- <router-view></router-view> -->
   <Tabbar  v-model="active">
  <TabbarItem icon="apps-o" @click="adminshowsheet" >{{$t("editor[0]")}}</TabbarItem>
  <TabbarItem icon="user-circle-o" @click="editorshowsheet">{{$t("admin[0]")}}</TabbarItem>
</Tabbar>
<ActionSheet
  v-model="adminshow"
  :actions="actions"
  :cancel-text="$t('cancer')"
  close-on-click-action
 
  @cancel="onCancel"
  @select="onSelect" 
/>  
<ActionSheet
  v-model="editorshow"
  :actions="actions"
  :cancel-text="$t('cancer')"
  close-on-click-action
  
  @cancel="onCancel"
  @select="onSelect" 
/> 
  </div>
</template>

<script>
// @ is an alias to /src
import { NavBar } from 'vant';
import { Button } from 'vant';
import { Tabbar, TabbarItem } from 'vant';
import { ActionSheet } from 'vant';
import HelloWorld from '@/components/HelloWorld.vue'

export default {
  name: 'Home',
  components: {
    HelloWorld,
    Button,
    Tabbar,
    TabbarItem,
    ActionSheet,
    NavBar
  },
  data() {
    return {
      active:0,
      adminshow: false,
      editorshow:false,
      // actions: [{ name: '选项一' }, { name: '选项二' }, { name: '选项三' }],
      actions:[{ name: this.$t("editor[1]") }, { name: this.$t("editor[2]") }, { name: this.$t("editor[3]") }],
      adminactions:[{ name: this.$t("editor[1]") }, { name: this.$t("editor[2]") }, { name: this.$t("editor[3]") }],
      filename: "HigoCoins",
      autoWidth: true,
      bookType: 'xlsx'
    }
  },
  methods:{
    change(){
          // console.log(this.$t("editor[0]"))
        if(this.$i18n.locale=="en"){
            this.$i18n.locale="cn"
        }else{
            this.$i18n.locale="en"
        }
        this.actions.forEach((el,index)=>{
          el.name=this.$t(`editor[${index+1}]`)
        })
        this.adminactions.forEach((el,index)=>{
          el.name=this.$t(`admin[${index+1}]`)
        })
    },
    showac(){
        // console.log(this.actions);
    },
    adminshowsheet(){
      // console.log(this.langactions);
      // this.actions=this.langactions
      this.adminshow=!this.adminshow
    },
    editorshowsheet(){
      // console.log(this.langactions);
      // this.actions=this.langactions
      this.editorshow=!this.editorshow
    },
  
    onCancel(e){
    
    },
    onSelect(e,i){
    // console.log(this.$t("editor.sysmange"))
    },
    onClickLeft(){
      
    },
    exportexcle(){
      import('@/vendor/Export2Excel').then(excel => {
        const tHeader = ['Id', 'Title', 'Author', 'Readings', 'Date']
        const filterVal = ['id', 'title', 'author', 'pageviews', 'display_time']
        const list =       [
 
             {id: 1, title: 2, author: 3, pageviews: 4, display_time: 5},
 
             {id: 6, title: 7, author: 8, pageviews: 9, display_time: 10},
 
             {id: 11, title: 12, author: 13, pageviews: 14, display_time: 15},
             {id: 5, title: 6, display_time: 9,author: 7, pageviews: 8 },
            ];
        const data =  this.formatJson(filterVal,list)
        console.log(data);
        excel.export_json_to_excel({
          header: tHeader,
          data,
          filename: this.filename,
          autoWidth: this.autoWidth,
          bookType: this.bookType
        })
      })
  
    },
      formatJson(filterVal, jsonData) {
 
        return jsonData.map(v => filterVal.map(j => v[j]))
 
      }
  }   
}
</script>
